<template>
    <view class="my-tabbar">
      <view class="tabbar-content">
        <view
          v-for="(item, idx) in tabList"
          :key="item.pagePath"
          class="tabbar-item"
          :class="{ active: idx === activeIdx }"
          @click="switchTab(item, idx)"
        >
          <view class="icon-wrapper">
            <text :class="['iconfont', item.icon]"></text>
          </view>
          <text class="tabbar-text">{{ item.text }}</text>
        </view>
      </view>
    </view>
  </template>
  
  <script setup>
  import { ref, onMounted } from 'vue'
  import { onShow } from '@dcloudio/uni-app'
  
  const tabList = [
    { text: '订单管理', pagePath: '/pages/index/index', icon: 'icon-dingdanguanli' },
    { text: '我的', pagePath: '/pages/my/my', icon: 'icon-my' }
  ]
  
  const activeIdx = ref(0)
  
  function updateActive() {
    const path = getCurrentPages().slice(-1)[0]?.route || ''
    const idx = tabList.findIndex(item => path.endsWith(item.pagePath.replace(/^\//, '')))
    activeIdx.value = idx === -1 ? 0 : idx
  }
  
  function switchTab(item, idx) {
    if (activeIdx.value !== idx) {
      uni.switchTab({ url: item.pagePath })
    }
  }
  
  onMounted(updateActive)
  onShow(updateActive)
  </script>
  
  <style scoped lang="scss">
  
  // 定义颜色变量
  $primary-color: #3B82F6;  // 主题色：柔和的蓝色
  $text-primary: #1F2937;   // 主要文字颜色：深灰
  $text-secondary: #6B7280; // 次要文字颜色：中灰
  $bg-color: #FFFFFF;       // 背景色：纯白
  $border-color: #E5E7EB;   // 边框颜色：浅灰
  $active-bg: #F3F4F6;      // 激活状态背景：更浅的灰
  
  .my-tabbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0rpx;
    height: 120rpx;
    background: rgba($bg-color, 0.98);
    backdrop-filter: blur(15px);
    border: none;
    border-radius: 0;
    display: flex;
    z-index: 100;
    padding-bottom: env(safe-area-inset-bottom);
    box-shadow: 0 -4rpx 25rpx rgba(0, 0, 0, 0.12);
  
    .tabbar-content {
      flex: 1;
      display: flex;
      justify-content: space-around;
      align-items: center;
      padding: 0;
      height: 100%;
    }
  
    .tabbar-item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        color: $text-secondary;
        font-size: 24rpx;
        position: relative;
        padding: 8rpx 0;
        height: 100%;
  
      .icon-wrapper {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 4rpx;
        width: 60rpx;
        height: 60rpx;
        border-radius: 50%;

        .iconfont {
          font-size: 40rpx;
          position: relative;
          z-index: 1;
        }

        .active-indicator {
          position: absolute;
          bottom: -2rpx;
          left: 50%;
          transform: translateX(-50%);
          width: 32rpx;
          height: 3rpx;
          background: $primary-color;
          border-radius: 2rpx;
        }
      }
  
      .tabbar-text {
        font-size: 20rpx;
        font-weight: 500;
        opacity: 0.8;
      }
  
      &.active {
        color: $primary-color;

        .icon-wrapper {
          .iconfont {
            color: $primary-color;
          }
        }

        .tabbar-text {
          color: $primary-color;
          opacity: 1;
          font-weight: 600;
        }
      }
  
      &:active {
        transform: scale(0.95);
        background: $active-bg;
      }
    }
  }
  
  // 添加安全区域适配
  @supports (padding-bottom: env(safe-area-inset-bottom)) {
    .my-tabbar {
      padding-bottom: env(safe-area-inset-bottom);
    }
  }
  </style>